<template>
  <a-drawer
    v-if="showItem"
    :width="500"
    placement="right"
    :closable="true"
    :visible="visible"
    @close="onClose"
  >
    <p :style="[pStyle, pStyle2]">
      {{ showItem.name }}
      {{ showItem.code }}
    </p>

    <a-descriptions :column="2">
      <a-descriptions-item label="商户别名" :span="2">
        {{ showItem.alias }}
      </a-descriptions-item>

      <a-descriptions-item label="商户电话" :span="2">
        {{ showItem.phone }}
      </a-descriptions-item>

      <a-descriptions-item label="联系人" :span="2">
        {{ showItem.contact }}
      </a-descriptions-item>

      <a-descriptions-item label="运营地址" :span="2">
        {{ showItem.area_name }}
        {{ showItem.address }}
      </a-descriptions-item>

      <a-descriptions-item v-if="showItem.describe" label="市场简介" :span="2">
        {{ showItem.describe }}
      </a-descriptions-item>
      <a-descriptions-item v-if="showItem.lng" label="纬度" :span="2">
        {{ showItem.lng }}
      </a-descriptions-item>
      <a-descriptions-item v-if="showItem.lat" label="经度" :span="2">
        {{ showItem.lat }}
      </a-descriptions-item>
      <a-descriptions-item label="状态" :span="2">
        {{ showItem.status_show }}
      </a-descriptions-item>
    </a-descriptions>

    <a-divider />
    <a-descriptions :column="2">
      <a-descriptions-item label="商家类型" :span="2">
        {{ showItem.type }}
      </a-descriptions-item>

      <a-descriptions-item label="税号" :span="2">
        {{ showItem.tax_number }}
      </a-descriptions-item>
      <a-descriptions-item label="银行账户" :span="2">
        {{ showItem.bank }}
      </a-descriptions-item>
      <a-descriptions-item label="社会统一代码" :span="2">
        {{ showItem.credit_code }}
      </a-descriptions-item>
      <a-descriptions-item label="经营类目" :span="2">
        {{ showItem.bus_category }}
      </a-descriptions-item>
    </a-descriptions>

    <div
      style="margin-top: 10px;"
      v-html="!showItem.introduction ? '-' : showItem.introduction"
    ></div>
    <div
      style="margin-top: 10px;"
      v-html="!showItem.remark ? '-' : showItem.remark"
    ></div>
  </a-drawer>
</template>

<script>
import merchant from "@/api/merchant"
export default {
  model: {
    //event:什么时候触发v-model行为
    event: "change-visible",
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: "visible",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {
        return undefined
      },
    },
    id: {
      type: Number,
      default: () => {
        return undefined
      },
    },
  },
  data() {
    return {
      pStyle: {
        fontSize: "16px",
        color: "rgba(0,0,0,0.85)",
        lineHeight: "24px",
        display: "block",
        marginBottom: "16px",
      },
      pStyle2: {
        marginBottom: "24px",
      },
      showItem: this.data,
    }
  },
  watch: {
    visible(flag) {
      if (!flag) return
      this.showItem = this.data
      this.getWeixinAccount()
    },
  },
  methods: {
    onClose() {
      this.$emit("change-visible", false)
    },
    getWeixinAccount() {
      if (!this.$func.isNumber(this.id) || this.id <= 0) {
        return
      }
      merchant.select(this.id).then((response) => {
        if (response.code !== 1) {
          return
        }
        this.showItem = response.data
      })
    },
  },
}
</script>

<style lang="less" type="text/less" scoped></style>
